<template>
  <div>
    <div id="aplayer"></div>
    <iframe style="width: 100%; height: 500px" src="//player.bilibili.com/player.?aid=903079883&bvid=BV1KP4y1d7Fr&cid=902182909&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  </div>
</template>

<script>
import APlayer from "aplayer"; // 引入音乐插件
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
export default {
  name: "ButMusic",
  data() {
    return {
      audio: [ // 歌曲列表
        {
          name: "Windy Hill", // 歌曲名字
          artist: "钢琴-羽肿", // 歌曲演唱者
          url: // 歌曲地址（这里用外链地址）
              "https://sharefs.ali.kugou.com/202110281324/e793a5ebf43ef95bb75f64d07ef246e4/G167/M02/15/07/h5QEAF1KXo2ALzKrAEtAl_Oe_Fo659.mp3",
          cover: "http://imge.kugou.com/stdmusic/150/20170815/20170815070007812976.jpg", // 歌曲头像
          lrc: "", // 歌词
          theme: "rgb(127, 218, 180)", // 播放这首歌曲时的主题色
        },
      ],
      info: {
        fixed: false, // 不开启吸底模式
        listFolded: true, // 折叠歌曲列表
        autoplay: true, // 开启自动播放
        preload: "auto", // 自动预加载歌曲
        loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
        order: "list", //  播放模式，list列表播放, random随机播放
      },
      musicList:[],
    };
  },
  created() {
    this.load()
  },
  mounted() {
  },
  methods: {
    initAudio() {
      // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
      const ap = new APlayer({
        container: document.getElementById("aplayer"),
        audio: this.audio, // 音乐信息
        ...this.info, // 其他配置信息
      });
    },
    load(){
      this.request.get("/music").then(res=>{
        if(res.code === "200"){
          this.musicList = res.data
          for (var i = 0; i < this.musicList.length; i++) {
            let item = {
              name: this.musicList[i].name,
              artist: this.musicList[i].author,
              url: this.musicList[i].audioSrc,
              cover: this.musicList[i].coverImg,
              lrc: "",
              theme: "#baf",

            }
            this.audio.push(item)
          }
          this.initAudio();
        }
      })
    },

  },
}
</script>

<style scoped>

</style>